<script setup>
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'

const premiumFeatures = [
    {
        iconType: 'heroicons-solid',
        icon: '\ue948',
        title: '高级功能',
        description: '会员可以访问 GPT-4 和我们最先进的功能',
    },
    {
        icon: '\ue9a4',
        title: '不限次数',
        description: '对话次数不受限制, 让您可以随时随地使用',
    },
    {
        icon: '\ue9c6',
        title: '更多功能',
        description: '更多功能等你来体验',
    },
]
</script>

<template>
    <view class="px-6 pb-8">
        <view class="pb-8 pt-10 text-3xl font-bold">ChatAI Plus</view>
        <view class="flex flex-col gap-6">
            <view
                v-for="(feature, idx) in premiumFeatures"
                :key="idx"
                class="flex space-x-3"
            >
                <uni-icons
                    :font-family="feature.iconType ?? 'heroicons-outline'"
                    :size="24"
                >
                    {{ feature.icon }}
                </uni-icons>
                <view>
                    <view class="pb-1 text-lg font-medium">
                        {{ feature.title }}
                    </view>
                    <view>{{ feature.description }}</view>
                </view>
            </view>
        </view>
        <view class="mt-16 flex flex-col items-center gap-3">
            <view>19元/月</view>
            <button
                class="flex rounded-full bg-zinc-950 px-16 py-3 text-base font-medium text-zinc-100"
            >
                立即订阅
            </button>
        </view>
    </view>
</template>
